<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function showPhoto(){
            var baby=document.getElementById("baby");//DOM对象
            var mi=document.getElementById("mi");//DOM对象
            var tong=document.getElementById("tong");//DOM对象
            var logo=document.getElementById("logo");//DOM对象
            if(mi.checked){//true杨幂被选中
                logo.src="images/yangmi.png";
            }else if(tong.checked){//关晓彤被选中
                logo.src="images/xiaotong.png";
            }else{
                logo.src="images/baby.png";
            }
        }
    </script>
</head>
<body>
    <input type="radio" name="idol" id="baby" checked onclick="showPhoto()">
    <label for="baby">baby</label>
    <input type="radio" name="idol" id="mi" onclick="showPhoto()">
    <label for="mi">杨幂</label>
    <input type="radio" name="idol" id="tong" onclick="showPhoto()">
    <label for="tong">关晓彤</label>
    <div>
        <img src="images/baby.png" alt="" id="logo">
    </div>
</body>
</html>